iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 3
0
Modern Web

師父領進門 修行在個人系列 第 16

16—JS挑戰—(11)-

  • 分享至 

  • xImage
  •  

準備考試,速速解決。先跳過21,感覺花的時間比較多。

  1. 22-Follow along links
  • getBoundingClientRect()
    const links = document.querySelectorAll('a')
    const highlight = document.createElement('span')
    highlight.classList.add('highlight')
    document.body.append(highlight)

    function highlightLink(){
      const linkCord = this.getBoundingClientRect()
      highlight.style.width = `${linkCord.width}px`
      highlight.style.height = `${linkCord.height}px`
      highlight.style.transform = `translate(${linkCord.left+window.scrollX}px,${linkCord.top+window.scrollY}px)`
    }

    links.forEach( a => a.addEventListener('mouseenter', highlightLink))

  1. 23-Speech Synthesis
  • speechSynthesis
const msg = new SpeechSynthesisUtterance();
  let voices = [];
  const voicesDropdown = document.querySelector('[name="voice"]');
  const options = document.querySelectorAll('[type="range"], [name="text"]');
  const speakButton = document.querySelector('#speak');
  const stopButton = document.querySelector('#stop');
  msg.text = document.querySelector('[name="text"]').value;

  function populateVoice(){
    voices = this.getVoices()
    voicesDropdown.innerHTML = voices
        .map(voice => `<option value='${voice.name}'>${voice.name}(${voice.lang})</option>`)
        .join(" ")
  }
  function setVoice(){
    msg.voice = voices.find(voice => voice.name ===this.value)
    toggle()
  }

  function toggle() {
    speechSynthesis.cancel()
    speechSynthesis.speak(msg)
  }

  speechSynthesis.addEventListener('voiceschanged',populateVoice)
  voicesDropdown.addEventListener('change',setVoice)

上一篇
休息一下,看看其他人-筆記(2)
下一篇
17—JS挑戰(11)—Sticky Nav + Event Capture, Propagation, Bubbling
系列文
師父領進門 修行在個人30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言